<template>
  <el-dialog :title="dialist.isAdd?'菜单添加':'菜单编辑'" :visible.sync="dialist.isShow" center :before-close="cancle">
  <el-form :model="list" ref="diaform" :rules="rules">
    <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
      <el-input v-model="list.title" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
      <el-select v-model="list.pid" placeholder="请选择上级菜单" @change="pidChange">
        <el-option label="顶级菜单" :value="0"></el-option>
        <el-option :label="item.title" :value="item.id" v-for="item in menuOption" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="菜单类型" :label-width="formLabelWidth">
        <el-radio-group v-model="list.type">
        <el-radio :label="1">目录</el-radio>
        <el-radio :label="2">菜单</el-radio>
    </el-radio-group>
    </el-form-item>
     <el-form-item label="菜单地址" :label-width="formLabelWidth" v-if="list.type==2">
      <el-input v-model="list.url" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="菜单图标" :label-width="formLabelWidth" v-else>
      <el-input v-model="list.icon" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="状态" :label-width="formLabelWidth">
      <el-switch v-model="list.status" :active-value="1" :inactive-value="2"></el-switch>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancle">取 消</el-button>
    <el-button type="primary" v-if="dialist.isAdd" @click="add">添 加</el-button>
    <el-button type="primary" v-else @click="edit">编 辑</el-button>
  </div>
</el-dialog>
</template>

<script>
import {addMenu,getMenuOne,editMenu,getMenu} from "../../util/axios"
export default {
  data(){
      return{
          list:{
              pid:0,
              title:"",
              icon:"",
              type:1,
              url:"",
              status:1,
          },
          formLabelWidth:"120px",
          rules:{
           title:[   
            { required: true, message: '请输入菜单名称', trigger: 'blur' },
            { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
            ],
            pid:[
                { required: true, message: '请选择菜单', trigger: 'blur'} 
            ]
           
          },
          menuOption:[],
      }
  },
  props:["dialist"],
  methods:{
      //点击取消后隐藏dialog
    cancle(){
      //隐藏dialog
        this.$emit("cancle",false);
        //清空表格
        this.list={
              pid:0,
              title:"",
              icon:"",
              type:1,
              url:"",
              status:1,
        }
        //清空验证
      this.$refs.diaform.resetFields();
    } ,
    //添加功能
   add(){
     this.$refs.diaform.validate(val=>{
       if(val){
          addMenu(this.list).then(res=>{
             if(res.code == 200){
              //  this.$router.push("/menu");
               this.$message.success(res.msg);
               this.$emit("rolad")
               this.cancle();
                
             }else{
               this.$message.error(res.msg);
             }
          }).catch(err=>{
             this.$message.error(err.msg);
          })
       }
     
     })
   },
   //dialog的编辑
   edit(){
    //  console.log(this.list);
        this.$refs.diaform.validate(val=>{
       if(val){
          editMenu(this.list).then(res=>{
             if(res.code == 200){
               this.$message.success(res.msg);
                 this.$emit("rolad")
               this.cancle();
             }else{
               this.$message.error(res.msg);
             }
          }).catch(err=>{
             this.$message.error(err.msg);
          })
       }
     
     })
   },
   lookup(id){
      getMenuOne({id}).then(res=>{
          if(res.code==200){
            this.list = res.list;
            this.list.id = id;
          }
      })
   },
   pidChange(n){
     this.list.type = n==0?1:2;
   },
  
  },
  mounted(){
    //页面挂载后循环数据
    getMenu({'pid':0}).then(res=>{
       if(res.code == 200){
         this.menuOption = res.list
       }else{
         this.$message.error(res.msg)
       }
    })
  }
}
</script>

<style lang="stylus" scoped>

</style>